﻿<div class="apple-pageView @Class" style="@Style">
    <header class="header">
        <header>
            <i class="light" style="background-color: #fd6458;"></i>
            <i class="light" style="background-color: #ffbf2b; margin-left: 8px;"></i>
            <i class="light" style="background-color: #24cc3d; margin-left: 8px;"></i>
        </header>
        <nav class="navbar">
            @Extra
        </nav>
    </header>
    <main class="context @ContextClass" style="@ContextStyle">
        @Context
    </main>
</div>

@code {
    [Parameter] public RenderFragment? Extra { get; set; }

    [Parameter] public RenderFragment? Context { get; set; }

    [Parameter] public string? Class { get; set; }

    [Parameter] public string? Style { get; set; }

    [Parameter] public string? ContextClass { get; set; }

    [Parameter] public string? ContextStyle { get; set; }
}

<style>
    .apple-pageView {
        border-radius: 10px;
        background-color: #fff;
    }

    .light {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    header {
        overflow: hidden;
        /* 防止子元素超出边界 */
        display: flex;
        scroll-snap-align: end;
    }

    .header{
        color: #f5f5f7;
        p{
            color: #191c1f;
        }
        /* 添加圆角 */
        overflow: hidden;
        /* 防止子元素超出边界 */
        display: flex;
        scroll-snap-align: end;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
    }

    .context{
        margin: 10px;
    }

    @@media screen and (max-width: 768px)  {
        .apple-pageView{
            border-radius : 0;
        }
    }
</style>